<template>
    <div>
        <h1>等级权益表</h1>
        等级编号:
        <select v-model="ts.levelid">
            <option value="0">请选择</option>
            <option v-for="c in datas" :value="c.memberLevelId">{{ c.memberLevelName }}</option>
        </select>
        权益编号:
        <select v-model="ts.rightid">
            <option value="0">请选择</option>
            <option v-for="d in data" :value="d.rightLevelId">{{ d.rightLevelName }}</option>
        </select>
        <input type="button" value="查询" @click="cx">
        <input type="button" value="重置" @click="cz">
        <table class="table">
            <thead>
                <tr>
                    <td>等级编号</td>
                    <td>等级名称</td>
                    <td>权益信息</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in ddddddddddd">
                    <td>{{ a.memberLevelId }}</td>
                    <td>{{ a.memberLevelName }}</td>
                    <td>{{ a.rightLevelName }}</td>
                    <td>{{ a.lstate?"启用":"禁用" }}</td>
                    <td>
                        <input type="button"  :value="a.lstate?'禁用':'启用'" @click="xzhuan(a.memberLevelId)">
                        <input type="button" v-if="a.lstate==true" value="分配权益" @click="fen(a.memberLevelId)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)"> 
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" v-for="c in zys.row" :value="c" @click="gezu(c)"> 
        <input type="button" value="下一页" @click="fanye(3)"> 
        <input type="button" value="尾页" @click="fanye(4)"> 
        当前第{{ ts.index }}页 共{{ zys.list }}条 每页{{ ts.size }}条 共{{ zys.row }}页
        <select v-model="ts.size" @click="yyl">
            <option>2</option>
            <option>4</option>
            <option>6</option>
        </select>
        <input type="number" v-model="ts.index">
        <input type="button" value="跳转" @click="tiao">
        <a href="/AddUser">跳</a>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref,onMounted } from 'vue';
import axios from 'axios';
const routher = useRouter()
onMounted(()=>{
    getss(),
    getdate(),
    show()
})
const fen=(val:any)=>{
    routher.push({path:"/",query:{id:val}})
}
const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}
const yyl=()=>{
    show()
}
const tiao=()=>{
    show()
}
const gezu=(val:any)=>{
    ts.value.index=val;
    show()
}
const cx=()=>{
    ts.value.index=1
    show()
}
const cz=()=>{
    ts.value={
    index:1,
    size:2,
    levelid:0,
    rightid:0
    }
    show()
}
const xzhuan=(val:any)=>{
    if(!confirm("确认修改吗")){
        return
    }
    axios.get("https://localhost:7258/api/MemerLevel/Xiu",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("修改成功")
            show()
        }
        else{
            alert("修改失败")
        }
    })
}
const ts=ref({
    index:1,
    size:2,
    levelid:0,
    rightid:0
})
const zys=ref({
    list:0,
    row:0
})
const show=()=>{
    axios.get("https://localhost:7258/api/MemerLevel/ShowLevel",{params:ts.value}).then(res=>{
        ddddddddddd.value=res.data.row

        zys.value.list=res.data.list
        zys.value.row=Math.ceil(res.data.list/ts.value.size)
    })
}
const ddddddddddd=ref([{
    "memberLevelName": "",
    "memberLevelId": 0,
    "rightLevelId": 0,
    "lstate": false,
    "rightLevelName": ""
}])
const getss=()=>{
    axios.get("https://localhost:7258/api/RightLevel/GetRightLevelSs").then(res=>{
        data.value=res.data
    })
}
const data=ref([{
    "rightLevelId": 0,
    "rightLevelName": "",
    "rstate": false,
    "isDelete": false
}])
const getdate=()=>{
    axios.get("https://localhost:7258/api/MemerLevel/GetMemberLevels",{params:data.value}).then(res=>{
        datas.value=res.data;
    })
}
const datas=ref([{
    "memberLevelId": 0,
    "memberLevelName": "",
    "lstate": false,
    "rightLevelId": 0
}])
</script>

<style scoped>

</style>